<template>
  <div class="app-container home">
    <h1>欢迎使用Weiyi管理系统</h1>
    <p>版本：{{ version }}</p>

    <!-- 系统信息卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统信息</span>
      </div>
      <ul class="sys-info">
        <li class="col-item">
          <span class="item-title">服务器状态：</span>
          <span class="item-value">运行中</span>
        </li>
        <li class="col-item">
          <span class="item-title">数据库：</span>
          <span class="item-value">MySQL</span>
        </li>
        <li class="col-item">
          <span class="item-title">磁盘使用：</span>
          <span class="item-value">60% 已用</span>
        </li>
      </ul>
    </el-card>

    <!-- 分隔线用于视觉分隔 -->
    <el-divider></el-divider>

    <!-- 更新日志卡片 -->
    <el-card class="box-card update-log">
      <div slot="header" class="clearfix">
        <span>更新日志</span>
      </div>
      <ol>
        <li>改进用户界面</li>
        <li>优化数据库性能</li>
        <li>新增功能</li>
      </ol>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      version: "3.8.7"
    };
  }
};
</script>

<style scoped lang="scss">
/* 对主容器的样式进行改进 */
.app-container {
  padding: 20px;

  h1 {
    font-size: 36px;
    margin-bottom: 20px;
  }

  /* 对盒状卡片的样式进行改进 */
  .box-card {
    margin-bottom: 20px;
  }

  /* 对系统信息列表的样式进行改进 */
  .sys-info {
    list-style: none;
    padding: 0;

    .col-item {
      margin-bottom: 10px;

      /* 对项目标题的样式进行改进 */
      .item-title {
        font-weight: bold;
        margin-right: 10px;
      }
    }
  }

  /* 对更新日志列表的样式进行改进 */
  .update-log {
    ol {
      padding: 0;
      list-style-type: decimal;
    }
  }
}
</style>
